<template>
  <div class="common-layout" style="height: 100%">
    <el-container style="height: 100%">
      <el-header>
        <div class="head">
          <div>
            <img class="logo" src="@/assets/logo.png" alt="" srcset="" />
          </div>
          <div>
            <el-dropdown>
              <img
                :src="userinfo.avatar"
                style="width: 50px; height: 50px; border-radius: 50%"
                alt=""
              />
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>
                    <div class="bg-gray">
                      <div>
                        <img
                         :src="userinfo.avatar"
                          class="avatar"
                          
                          alt=""
                          srcset=""
                        />
                      </div>
                      <div>
                        <div class="name">{{userinfo.username}}</div>
                        <div class="role">超级管理员</div>
                      </div>
                    </div>
                  </el-dropdown-item>
                  <el-dropdown-item @click="logout()"
                    >退出登录</el-dropdown-item
                  >
              
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu
            :default-active="activede"
            style="height: 100%"
            class="el-menu-vertical-demo"
            active-text-color="#7c29ff"
            @open="handleOpen"
            @select="selectmenu"
            router
            @close="handleClose"
          >
         

            <!-- <el-menu-item index="/usr1">
              <el-icon><setting /></el-icon>
              <span>主面板</span>
            </el-menu-item> -->
                   <el-menu-item index="/userr">
              <el-icon><setting /></el-icon>
              <span>用户管理</span>
            </el-menu-item>
                       <el-menu-item index="/live">
              <el-icon><setting /></el-icon>
              <span>直播间管理</span>
            </el-menu-item>
                       <el-menu-item index="/gift">
              <el-icon><setting /></el-icon>
              <span>礼物管理</span>
            </el-menu-item>
                       <el-menu-item index="/order">
              <el-icon><setting /></el-icon>
              <span>订单管理</span>
            </el-menu-item>
                          <el-menu-item index="/user">
              <el-icon><icon-menu /></el-icon>
              <span>管理员</span>
            </el-menu-item>   
          </el-menu>
        </el-aside>
        <el-main><router-view></router-view></el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script setup>

import { onMounted ,ref} from 'vue';
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const userinfo=ref({});
onMounted(()=>{
  console.log(window.localStorage.getItem("userinfo"))
  userinfo.value=JSON.parse(window.localStorage.getItem("userinfo"))
  if(window.localStorage.getItem("active")){
    activede.value=window.localStorage.getItem("active")
  }
})
const selectmenu=(e)=>{
  console.log(e,"e")
  activede.value=e;
  window.localStorage.setItem("active",activede.value)
}
const activede=ref("/user");
const logout = () => {
  window.localStorage.clear()
router.push({
  path:"/"
})

};
</script>
<style>
.head {
  width: 100%;
  height: 100%;
  background: linear-gradient(-45deg, #7c29ff, #8944f6);

  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 20px;
  box-sizing: border-box;
}
.logo {
  width: 143px;
  height: 41px;
}
.el-header {
  padding: 0px !important;
}
.bg-gray {
  width: 100%;
  background: #e5e5e5;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}
.name{
  color: #000;
  font-size: 16px;
}
.role{
 
  font-size: 16px;
}
</style>
